<template>
  <view class="product-detail">
    <ProductBanner :media="product.media" />
    <ProductHeader
      :name="product.name"
      :description="product.description"
      :price="price"
      :stock="stock"
    />
    <ProductSpecs
      :specName="specInfo.specName"
      :specValue="specInfo.specValue"
      :isService="!!price.points"
    />
    <ProductNotice v-if="isNotice" />
    <ProductRecommend v-if="!!typeRecommend.length" :list="typeRecommend" />
    <ProductDetails :richText="product.detail" />
    <ProductAction :productDetails="product" :isPoint="!!price.points" />
    <HomeFab />
  </view>
</template>

<script lang="ts">
import "./index.less";
import Taro from "@tarojs/taro";
import ProductBanner from "./components/ProductBanner/index.vue";
import ProductHeader from "./components/ProductHeader/ProductHeader.vue";
import ProductSpecs from "./components/ProductSpecs/ProductSpecs.vue";
import ProductNotice from "./components/ProductNotice/ProductNotice.vue";
import ProductRecommend from "./components/ProductRecommend/ProductRecommend.vue";
import ProductDetails from "./components/ProductDetails/ProductDetails.vue";
import ProductAction from "./components/ProductAction/ProductAction.vue";
import HomeFab from "../../../common-components/fab/index.vue";
import {
  getProductDetails,
  getProductRecommend,
  ProductType,
} from "../../../services/products-service";

export default {
  components: {
    ProductBanner,
    ProductHeader,
    ProductSpecs,
    ProductNotice,
    ProductRecommend,
    ProductDetails,
    ProductAction,
    HomeFab,
  },
  data() {
    return {
      product: {},
      selectedSpec: 0,
      typeRecommend: [],
    };
  },
  computed: {
    price() {
      const { specs = [] } = this.product;
      const { price = { money: 0, points: 0 } } =
        specs.find((s) => s.id === this.selectedSpec) ||
        specs.find((s) => s) ||
        {};
      return price;
    },
    stock() {
      const { specs = [] } = this.product;
      const { stock } =
        specs.find((s) => s.id === this.selectedSpec) ||
        specs.find((s) => s) ||
        {};
      return stock;
    },
    specInfo() {
      const { specAttrs = { keyName: "", values: [{ valueName: "" }] } } =
        this.product;
      return {
        specName: specAttrs.keyName,
        specValue: specAttrs.values[0]?.valueName,
      };
    },
    isNotice() {
      const { type } = this.product;
      return type === ProductType.PHYSICAL;
    },
  },
  methods: {
    async getDetails(id: string | number) {
      if (id !== undefined) {
        this.product = await getProductDetails(id);
        this.$store.commit("setProductDetails", this.product);
        await this.getTypeRecommend();
      }
    },
    async getTypeRecommend() {
      const { records } = await getProductRecommend({
        page: 1,
        size: 4,
        is_points_mall: !!this.price.points,
        type: this.product.type,
      });
      this.typeRecommend = records;

      this.$store.commit("setTypeRecommend", this.typeRecommend);
    },
  },

  async mounted() {
    // 开启页面功能
    Taro.showShareMenu({
      withShareTicket: true
    });
    const current = Taro.getCurrentInstance();
    await this.getDetails(current.router?.params.productId);
  },

  // 对应 onPullDownRefresh
  async onPullDownRefresh() {
    const current = Taro.getCurrentInstance();
    await this.getDetails(current.router?.params.productId);
  },
};
</script>
